<template>
    <!-- 屏蔽名单 -->
    <div class="box">
        <heads ref="heads"></heads>
        <titlesearch></titlesearch>
        <div class="gerenBox">
            <ceList :index="36"></ceList>

            <div class="new-box">
                <div class="like-title">我的喜好</div>
                <div class="like-btn pointer" :style="step == 2 ? 'opacity:1' : 'opacity:0'" @click.stop="operate">完成</div>
                <div class="like-list " v-show="step == 1">
                    <div class="like-item" v-for="(item, index) in [...myHomepage, ...tempList]" style="cursor: pointer"
                        :key="item.id">
                        <div class="like-main" @click="goP(item)">
                            <img class="like-image" :src="item.image" mode="" />
                            <span class="like-text">{{ item.name }}</span>
                        </div>

                    </div>
                    <div class="like-item">
                        <div class="like-main pointer" style="" @click="changeStep(2)">
                            <span class="like-text el-icon-plus " style="font-size: 32px;color: #64b6a8;"></span>
                        </div>
                    </div>
                </div>
                <div class="step" v-show="step == 2">
                    <div class="like-list t">
                        <div class="like-item" :class="index > 3 ? 'abe' : 'dis'"
                            v-for="(item, index) in  [...myHomepage, ...tempList]" style="cursor: pointer" :key="item.id">
                            <div class="like-main">
                                <img class="like-image" :src="item.image" mode="" />
                                <span class="like-text">{{ item.name }}</span>
                                <img class="like-sub" v-if="item.sign" @click="likeSub(item)"
                                    src="https://pic.bangbangtongcheng.com/static/bbcz/wdxh/wdxhj01.png">
                            </div>
                        </div>
                    </div>

                    <div class="seperate"></div>

                    <div class="like-list">
                        <div class="like-item" v-if="!existIds.includes(item.id)" v-for="(item, index) in  xzList"
                            style="cursor: pointer" :key="item.id">
                            <div class="like-main">
                                <img class="like-image" :src="item.image" mode="" />
                                <span class="like-text">{{ item.name }}</span>
                                <!-- <img class="like-sub"  @click="likeSub(item)"
                                    src="https://pic.bangbangtongcheng.com/static/bbcz/wdxh/wdxhj01.png"> -->
                                <img class="like-sub like-add" v-if="!existIds.includes(item.id)" @click="likeAdd(item)"
                                    src="https://pic.bangbangtongcheng.com/static/bbcz/wdxh/wdxhj02.png">
                            </div>
                        </div>
                    </div>
                </div>

            </div>





        </div>
        <floor></floor>
    </div>
</template>
<script>
import floor from "@/components/floor";
import heads from "@/components/head";
import ceList from "@/components/ceList.vue";
import titlesearch from "@/components/titlesearch.vue";
import Sortable from 'sortablejs'
import { mapMutations, mapState } from "vuex";
export default {
    components: {
        floor,
        heads,
        ceList,
        titlesearch,
    },
    computed: {
        existIds() {
            return this.xzList.filter(item => item.sign).map(item => item.id)
        },


    },
    data() {
        return {
            tempList: [],
            step: 1,
            myHomepage: [
                {
                    id: 99,
                    name: "我的主页",
                    image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/wdzy01.png",
                    path: "/my/bbcz/myHomepage",
                },
                {
                    id: 98,
                    name: "帮帮安巢",
                    image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/bbac01.png",
                    path: "/index",

                },
                {
                    id: 97,
                    name: "帮帮车主",
                    image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/bbcz01.png",
                    path: "/index/helpOwner",

                },
                {
                    id: 96,
                    name: "帮帮招才",
                    image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/bbzc01.png",
                    path: "/invite/index",

                },
            ],

            xzList: [{
                id: 2,
                name: "地图找车",
                image: "https://pic.bangbangtongcheng.com/5a0cb3b93ed244b9b99c30e6594b166f",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/mapCarSearch.png",
                path: "/index/mapCar",
                query: {},
                sign: false,
            }, {
                id: 3,
                name: "地图找房",
                image: "https://pic.bangbangtongcheng.com/46219d8d88864267af519984bad07196",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/findRoomMap.png",
                path: "/index/mapSearch",
                query: {},
                sign: false,
            }, {
                id: 4,
                name: "房源信息",
                image: "https://pic.bangbangtongcheng.com/276beef2c430472c81b737820d337fac",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/housInformation.png",
                path: "/index/housing",
                query: {},
                sign: false,
            }, {
                id: 5,
                name: "在售楼盘",
                image: "https://pic.bangbangtongcheng.com/47a265dbd66a4fae90ece7f3329f8fed",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/propertySale.png",
                path: "/index/storey",
                query: {},
                sign: false,
            }, {
                id: 6,
                name: "中介",
                image: "https://pic.bangbangtongcheng.com/d1ac01a48e70477e92f7b7cbb20f53ba",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/intermediary.png",
                path: "/index/intermediary",
                query: {},
                sign: false,
            }, {
                id: 7,
                name: "二手房",
                image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/esf01.png",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/secondHandHouse.png",
                path: "/index/newHouse",
                query: { transactionType: 2, newOld: 2 },
                sign: false,
            }, {
                id: 8,
                name: "新房",
                image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/xf01.png",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/newHouse.png",
                path: "/index/newHouse",
                query: { transactionType: 2, newOld: 1 },

                sign: false,
            }, {
                id: 9,
                name: "出租房",
                image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/esf01.png",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/rentalHouse.png",
                path: "/index/lease",
                query: { transactionType: 1 },
                sign: false,
            }, {
                id: 10,
                name: "车源信息",
                image: "https://pic.bangbangtongcheng.com/6dc13395e02b40259aabff8d48a75600",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/vehicleSource.png",
                path: "/index/optionsAvailable",
                query: {},
                sign: false,
            }, {
                id: 11,
                name: "经销商",
                image: "https://pic.bangbangtongcheng.com/6bd0898ce217489a9de53637810be0bc",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/distributor.png",
                path: "/index/dealer",
                query: {},
                sign: false,
            }, {
                id: 12,
                name: "车主服务",
                image: "https://pic.bangbangtongcheng.com/a4268b514af44adbbd87f86d5455d5b0",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/ownerService.png",
                path: "/index/ownerService",
                query: {},
                sign: false,
            }, {
                id: 13,
                name: "到店新车",
                image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/ddxc02.png",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/newCarStore.png",
                path: "/index/newSource",
                query: { transactionType: 2, newOld: 1 },
                sign: false,
            }, {
                id: 14,
                name: "二手车",
                image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/esc02.png",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/usedCar.png",
                path: "/index/newSource",
                query: { transactionType: 2, newOld: 2 },

                sign: false,
            }, {
                id: 15,
                name: "美容装饰",
                image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/mrzs02.png",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/beautyDecoration.png",
                path: "/index/newDealer",
                query: { transactionType: 2, newOld: 3 },

                sign: false,
            }, {
                id: 16,
                name: "维修保养",
                image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/qcwx01.png",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/Maintenance.png",
                path: "/index/newDealer",
                query: { transactionType: 2, newOld: 4 },

                sign: false,
            }, {
                id: 17,
                name: "4S店",
                image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/4s01.png",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/4SShop.png",
                path: "/index/newDealer",
                query: { transactionType: 2, newOld: 1 },
                sign: false,
            }, {
                id: 18,
                name: "汽贸店",
                image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/qmd01.png",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/autoTradeShop.png",
                path: "/index/newDealer",
                query: { transactionType: 2, newOld: 2 },
                sign: false,
            },
            {
                id: 22,
                name: "招才信息",
                image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/zcxx01.png",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/zcxx02.png",
                path: "/invite/invite",
                query: {},
                sign: false,
            },
            {
                id: 23,
                name: "人才简历",
                image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/rcjl01.png",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/rcjl02.png",
                path: "/invite/resume",
                query: {},
                sign: false,
            },
            {
                id: 24,
                name: "地图招才",
                image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/dtzc01.png",
                image2: "https://pic.bangbangtongcheng.com/static/LevitationBall/dtzc02.png",
                path: "/invite/mapSearch",
                query: {},
                sign: false,
            },
            {
                id: 25,
                name: "俱乐部",
                image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/xh_byjlb.png",
                image2: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/xh_xfq_byjlb.png",
                path: "/my/vipCenterCopy",
                query: {},
                sign: false,
            },
            {
                id: 26,
                name: "帮友圈",
                image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/xh_byq.png",
                image2: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/xh_xfq_byq.png",
                path: "/index/friendsCircle",
                query: {},
                sign: false,
            },
            {
                id: 27,
                name: "发布",
                image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/xh_fb.png",
                image2: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/xh_xfq_fb.png",
                path: "release",
                query: {},
                sign: false,
            },
            {
                id: 28,
                name: "消息",
                image: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/xh_xx.png",
                image2: "https://pic.bangbangtongcheng.com/static/bbcz/wdxh/xh_xfq_xx.png",
                path: "/my/information",
                query: {},
                sign: false,
            },
            ],

        };
    },

    mounted() {
        this.getUser();
        if (localStorage.getItem('whatLike')) {
            this.tempList = JSON.parse(localStorage.getItem('whatLike'))
            this.tempList.map(item => {
                this.xzList.map(item2 => {
                    if (item2.id == item.id) {
                        // this.existIds.push(item2.id)
                        item2.sign = true
                    }
                })
            })
        } else {
            this.tempList = JSON.parse(JSON.stringify(this.xzList.filter(item => item.sign)))
        }
    },
    methods: {
        goP(item) {
            if (item.name == '发布') {
                this.$refs.heads.toRouter(1)
                return
            }
            this.openUrlb(item.path, item.query)
        },
        operate() {
            this.step = 1
            this.save()
        },
        save() {
            localStorage.setItem('whatLike', JSON.stringify([
                ...this.tempList,
            ]))
        },
        changeStep(step) {
            this.step = step
            setTimeout(() => {
                this.rowDrop()
            }, 50)
        },
        rowDrop() {
            const tbody = document.querySelector(".like-list.t");
            Sortable.create(tbody, {
                animation: 300,
                delay: 10,
                // 如果有不想排序的，在这里按照class匹配的方式写出即可
                filter: ".dis",
                // 需要拖拽的标签的class，强烈推荐写
                draggable: ".abe",
                onEnd: ({ newIndex, oldIndex }) => {
                    console.log(newIndex, oldIndex)
                    oldIndex = oldIndex - 4
                    newIndex = newIndex - 4

                    let sortData = this.tempList;
                    let newTemp = sortData[oldIndex]
                    let oldemp = sortData[newIndex]
                    sortData.splice(newIndex, 1, newTemp)
                    sortData.splice(oldIndex, 1, oldemp)
                    // sortData.splice(oldIndex - 1, 1)
                    // sortData.splice(newIndex - 1, -1, temp)
                    this.tempList = sortData;
                }
            });
        },

        likeSub(item) {
            this.xzList.map((item2, index) => {
                if (item2.id == item.id) {
                    item2.sign = false
                }
            })
            this.tempList.map((item2, index) => {
                if (item2.id == item.id) {
                    this.tempList.splice(index, 1)

                }
            })
            this.save()
        },
        likeAdd(item) {
            this.xzList.map(item2 => {
                if (item2.id == item.id) {
                    item2.sign = true
                    this.tempList.push(item)
                }
            })
            this.save()

        },

        getUser() {
            let user = JSON.parse(localStorage.getItem("userInfo"));
            if (user != null) {
                this.loginstate = true;
                this.user = user;
                // this.getMsgInfo();
            } else {
                this.loginstate = false;
                this.$message({
                    message: "请登录！",
                    type: "error",
                    offset: 120,
                    duration: 2000,
                });
                this.$router.push("/");
            }
        },

    },
};
</script>
<style lang="less" scoped>
.toread-wrap {
    position: relative;

    .toread {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 16px;
        height: 16px;
        background: red;
        border-radius: 50%;
    }
}

.con {
    .title1 {
        display: flex;
        padding: 25px 34px;
        color: #333333;
        font-size: 20px;
        align-items: center;
        border-bottom: #e0e0e0 1px solid;
        justify-content: space-between;
    }
}

.box {
    position: relative;
    padding-bottom: 200px;
}

.con {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    width: 940px;
    color: #333;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    padding: 24px 40px;

    .new-title {
        height: 50px;
        background: #f2f2f2;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        font-size: 24px;
        font-weight: 500;
        color: #666666;
        line-height: 50px;
        padding-left: 40px;
    }

    .list {
        .li {
            position: relative;
            line-height: 40px;

            display: flex;
            padding: 30px 20px 16px 20px;
            border-bottom: 1px solid #e0e0e0;

            // justify-content: space-between;
            box-sizing: border-box;

            .operate-btn {
                width: 92px;
                height: 40px;
                border-radius: 4px 4px 4px 4px;
                opacity: 1;
                border: 1px solid #64b6a8;

                font-size: 20px;
                font-weight: 400;
                color: #64b6a8;
                line-height: 40px;
                text-align: center;
                cursor: pointer;
            }
        }
    }

    .fenye {
        width: 100%;
        height: 50px;
        text-align: center;
        margin-bottom: 50px;
    }

    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #64b6a8;
    }
}

.seperate {
    border-bottom: 1px solid #64b6a8;
    margin: 24px 0;
}

.new-box {
    color: #333;
    flex: 1;
    text-align: right;

    .like-title {
        padding: 24px 0;
        padding-top: 48px;
        font-size: 30px;
        font-weight: 400;
        text-align: center;
    }

    .like-btn {
        justify-self: flex-end;
        align-self: flex-end;
        background-color: #64b6a8;
        color: #ffffff;
        font-size: 20px;
        font-weight: 400;
        // text-align: right;
        padding: 4px 12px;
        border-radius: 4px;
        display: inline-block;
        margin-bottom: 20px;

    }

    .like-list {
        display: flex;
        flex-wrap: wrap;

        .like-item {

            display: flex;
            align-items: center;
            justify-content: center;
            margin: 32px;

            .like-main {
                width: 120px;
                height: 120px;
                position: relative;
                border-radius: 50%;
                border: 1px solid #64b6a8;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
            }

            .like-image {
                width: 60px;
                height: auto;
            }

            .like-text {
                font-size: 18px;
                font-weight: 400;
                white-space: nowrap;

            }

            .like-sub {
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    }
}

.gerenBox {
    width: 1200px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 32px;
    margin-bottom: 45px;
    display: flex;
    align-items: flex-start;

    .geren {
        flex-shrink: 0;
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        width: 240px;
        min-height: 820px;
        margin-right: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        overflow: hidden;

        img {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            margin-top: 40px;
            margin-left: 65px;
        }

        p {
            width: 100%;
            text-align: center;
            font-size: 18px;
            color: #333333;
            margin-top: 12px;
            margin-bottom: 40px;
        }

        .list {
            position: relative;
            width: 100%;

            .li {
                width: 209px;
                height: 50px;
                line-height: 50px;
                margin-left: 30px;
                text-indent: 40px;
                font-size: 18px;
                color: #333;
                border-radius: 25px 0 0 25px;
                cursor: pointer;
            }

            .xuan {
                background-color: #64b6a8;
                color: #fff;
            }
        }

        .kuai {
            width: 100%;
            height: 6px;
            background-color: #64b6a8;
            position: absolute;
            bottom: 0;
        }
    }
}

.tit {
    width: 100%;
    height: 100px;
    background-color: #f2f2f2;

    .list {
        position: relative;
        width: 1200px;
        margin-left: 50%;
        padding-top: 25px;
        transform: translateX(-50%);
        background-color: #f2f2f2;

        div {
            display: inline-block;
            vertical-align: middle;
            font-size: 20px;
            color: #333333;
        }

        .li {
            font-size: 28px;
            color: #64b6a8;
            margin-right: 60px;

            img {
                width: 60px;
                height: 60px;
            }

            span {
                vertical-align: middle;
            }
        }

        .rig {
            position: absolute;
            right: 0;

            .but {
                width: 200px;
                height: 50px;
                background: #64b6a8;
                border-radius: 6px;
                text-align: center;
                line-height: 50px;
                color: #fff;
                margin-left: 30px;
            }
        }
    }
}
</style>
  